﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="950" height="600"></canvas>
    <script>
        (function () {
            var canvasEl = document.getElementById('canvas');
            var ctx = canvasEl.getContext('2d');
            var mousePos = { x: 0, y: 0 };
            var nodes = [
                {
                    x: 0,
                    y: 0,
                    vx: 0,
                    vy: 0,
                    radius: 0,
                    isMouse: true
                }
            ];
            var edges = [];
            var backgroundColor = "black";
            var edgeColor = "#fff";
            var nodeColor = "#fff";
            var mouseColor = "#f00";
            var easingFactor = 0.8;
            var speed = 1;  //速度


            window.onresize = function () {
                canvasEl.width = document.body.clientWidth;
                canvasEl.height = document.body.clientHeight;
                if (nodes.length <= 1) {
                    CreateNodes();
                }
                step();
            };

            window.onresize();
            canvasEl.onmousemove = function (e) {
                mousePos.x = e.clientX;
                mousePos.y = e.clientY;
            }

            function CreateNodes() {
                if (nodes.length <= 1) {
                    for (var i = 0; i < 100; i++) {
                        var node = {
                            x: Math.random() * canvasEl.width,
                            y: Math.random() * canvasEl.height,
                            vx: (Math.random() - 0.5) * speed,
                            vy: (Math.random() - 0.5) * speed,
                            radius: Math.random() > 0.9 ? Math.random() * 3 : 0.9 * 3,
                            isMouse: false
                        }
                        nodes.push(node);
                    }
                }

            }

            function step() {
                //console.log('mousePos', mousePos.x, mousePos.y)
                nodes.forEach(function (e) {
                    if (e.isMouse)
                        return;
                    e.x += e.vx;
                    e.y += e.vy;

                    function clamp(min, max, value) {
                        if (value < min)
                            value = min;
                        else if (value > max)
                            value = max;
                        return value;
                    }
                    if (e.x <= 0 || e.x >= canvasEl.width) {
                        e.vx *= -1;
                        e.x = clamp(0, canvasEl.width, e.x);
                    }
                    if (e.y <= 0 || e.y >= canvasEl.height) {
                        e.vy *= -1;
                        e.y = clamp(0, canvasEl.height, e.y);
                    }

                });
                adjustMouse();
                render();
                window.requestAnimationFrame(step);
            }

            function adjustMouse() {
                nodes[0].x += (mousePos.x - nodes[0].x) / easingFactor;
                nodes[0].y += (mousePos.y - nodes[0].y) / easingFactor;
            }

            function render() {
                //画背景
                ctx.fillStyle = backgroundColor;
                ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);

                //画圆圈、画线
                ctx.fillStyle = nodeColor;
                for (var i = 0; i < nodes.length; i++) {
                    if (!nodes[i].isMouse) {
                        ctx.beginPath();
                        ctx.arc(nodes[i].x, nodes[i].y, nodes[i].radius, 0, Math.PI * 2, true);
                        ctx.closePath();
                        ctx.fill();
                    }

                    var threshold = canvasEl.width / 6;
                    if (nodes[i].isMouse)
                        ctx.strokeStyle = mouseColor;
                    else
                        ctx.strokeStyle = edgeColor;

                    for (var j = i + 1; j < nodes.length; j++) {
                        //如果两点间距离小于阀值，则绘线
                        var range = rangeOfPoints(nodes[i], nodes[j]);
                        if (range < threshold) {
                            ctx.lineWidth = (1 - range / threshold) * 1.5;
                            ctx.globalAlpha = (1 - range / threshold) * 0.8;
                            ctx.beginPath();
                            ctx.moveTo(nodes[i].x, nodes[i].y);
                            ctx.lineTo(nodes[j].x, nodes[j].y);
                            ctx.closePath();
                            ctx.stroke();
                        }
                    }

                }

            }

            function rangeOfPoints(start, end) {
                var x = start.x - end.x;
                var y = start.y - end.y;
                var z = Math.sqrt(x * x + y * y);
                return z;
            }
        })();
     
    </script>
</body>
</html>
